.message-item {
  display: flex;
  align-items: flex-start;
  padding: 2.29vw 1.665vw 0vw 1.665vw;

  &-right {
    display: flex;
    flex-direction: column;
  }

  &-content {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.33vw;
    max-width: 36vw;
    border-radius: 0.2vw;
    padding: 0.8325vw;
    color: #333333;
    font-size: 1.145vw;
    line-height: 1.35vw;
    z-index: 10;
  }


  &-special {
    color: #1EBEF2;
    font-size: 1.145vw;
    line-height: 1.35vw;
    margin-right: 0.8325vw;
  }

  &-replyTips {
    max-width: 36vw;
    margin-top: 0.625vw;
    background-color: #EAEAEA;
    border-radius: 0.2083vw;
    padding: 0.5208vw 0.625vw;
    color: #999999;
    font-size: 0.9375vw;
    line-height: 1.3021vw;
  }
}

.isReply {
  .message-item {
    &-content {
      background-color: #E0F7FF;
    }
    &-right {
      align-items: flex-end;
    }
  }
}

.isMessage {
  .message-item {
    &-content {
      background-color: #FFFFFF;
    }
    &-right {
      align-items: flex-start;
    }
  }
}
